<template>
  <transition name="fade">
    <div v-if="isPlayList" class="list_fixed">
      <div class="list_bg" @click="$emit('back-play-list')"></div>
      <div class="component">
        <div>
          <ListDetailMain
            :songObj="playLists"
            @play-audio="$emit('play-audio', $event)"
            :NewesArr="NewesArr"
            :playing="playing"
            :songId="songId"
          />
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import ListDetailMain from "@/components/ListDetailMain.vue";
export default {
  components: {
    ListDetailMain,
  },
  props: {
    isPlayList: Boolean,
    playLists: [Object,Array],
    NewesArr:Array,
    playing:Boolean,
    songId: Number,
  },
};
</script>

<style lang="less" scoped>
.list_fixed {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  //   z-index: 4;

  .list_bg {
    width: 100vw;
    height: 100vh;
    background-color: #7f7f7f9d;
    z-index: 4;
  }
  .component {
    width: 90vw;
    height: 60vh;
    overflow-y: auto;
    z-index: 5;
    position: fixed;
    bottom: 60px;
    left: 5vw;
    border-radius: 5vw;
  }
}
.fade-enter-active,
.fade-leave-active{
    // transform: translateY(100vh);
    transition:all 0.2s linear;
}
.fade-enter,
.fade-leave-to{
    // transform: translateY(0);
    opacity: 0;

}
</style>